<template>
	<view class="cart-container">
		<!-- 收货地址区域 -->
		<view class="address-section" @click="navigateToAddress">
			<block v-if="selectedAddress">
				<view class="address-info">
					<view class="user-info">
						<text class="name">{{selectedAddress.name}}</text>
						<text class="phone">{{selectedAddress.phone}}</text>
					</view>
					<view class="address-detail">{{selectedAddress.address}}</view>
				</view>
			</block>
			<block v-else>
				<view class="no-address">
					<text>请选择收货地址</text>
				</view>
			</block>
			<uni-icons type="right" size="20" color="#999"></uni-icons>
		</view>

		<!-- 购物车列表 -->
		<view class="cart-list" v-if="cartList.length > 0">
			<view class="cart-item" v-for="(item, index) in cartList" :key="index">
				<!-- 商品图片 -->
				<view class="item-image">
					<view class="image-placeholder"></view>
				</view>
				
				<!-- 商品信息 -->
				<view class="item-info">
					<text class="item-name">{{item.name}}</text>
					<text class="item-price">¥{{item.price}}</text>
				</view>
				
				<!-- 数量控制 -->
				<view class="item-quantity">
					<button class="quantity-btn" size="mini" @click="decreaseQuantity(index)">-</button>
					<text class="quantity-text">{{item.quantity}}</text>
					<button class="quantity-btn" size="mini" @click="increaseQuantity(index)">+</button>
				</view>
				
				<!-- 删除按钮 -->
				<view class="delete-btn" @click="deleteItem(index)">
					<uni-icons type="trash" size="20" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		
		<!-- 空购物车提示 -->
		<view class="empty-cart" v-else>
			<uni-icons type="cart" size="50" color="#999"></uni-icons>
			<text class="empty-text">购物车是空的</text>
		</view>
		
		<!-- 底部结算栏 -->
		<view class="checkout-bar" v-if="cartList.length > 0">
			<view class="total-price">
				<text>合计：</text>
				<text class="price">¥{{totalPrice}}</text>
			</view>
			<button class="checkout-btn" type="primary" @click="checkout">结算({{totalQuantity}})</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedAddress: null, // 选中的收货地址
				cartList: [{
					id: 1,
					name: '布洛芬胶囊',
					price: 25.8,
					quantity: 1
				}, {
					id: 2,
					name: '感冒灵颗粒',
					price: 32.5,
					quantity: 2
				}]
			}
		},
		computed: {
			// 计算总价
			totalPrice() {
				return this.cartList.reduce((total, item) => {
					return total + (item.price * item.quantity);
				}, 0).toFixed(2);
			},
			// 计算总数量
			totalQuantity() {
				return this.cartList.reduce((total, item) => {
					return total + item.quantity;
				}, 0);
			}
		},
		methods: {
			// 跳转到地址页面
			navigateToAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				});
			},
			// 减少数量
			decreaseQuantity(index) {
				if (this.cartList[index].quantity > 1) {
					this.cartList[index].quantity--;
				}
			},
			// 增加数量
			increaseQuantity(index) {
				this.cartList[index].quantity++;
			},
			// 删除商品
			deleteItem(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这个商品吗？',
					success: (res) => {
						if (res.confirm) {
							this.cartList.splice(index, 1);
						}
					}
				});
			},
			// 结算
			checkout() {
				uni.showToast({
					title: '结算功能开发中',
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss">
.cart-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
}

// 收货地址区域样式
.address-section {
	background-color: #ffffff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	
	.address-info {
		flex: 1;
		
		.user-info {
			margin-bottom: 10rpx;
			
			.name {
				font-size: 32rpx;
				color: #333;
				margin-right: 20rpx;
			}
			
			.phone {
				font-size: 28rpx;
				color: #666;
			}
		}
		
		.address-detail {
			font-size: 28rpx;
			color: #666;
			line-height: 1.4;
		}
	}
	
	.no-address {
		flex: 1;
		font-size: 28rpx;
		color: #999;
	}
}

.cart-list {
	padding: 20rpx;
	
	.cart-item {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		
		.item-image {
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;
			
			.image-placeholder {
				width: 100%;
				height: 100%;
				background-color: #f0f0f0;
				border-radius: 8rpx;
			}
		}
		
		.item-info {
			flex: 1;
			margin-right: 20rpx;
			
			.item-name {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 10rpx;
				display: block;
			}
			
			.item-price {
				font-size: 32rpx;
				color: #ff6b6b;
				font-weight: bold;
			}
		}
		
		.item-quantity {
			display: flex;
			align-items: center;
			margin-right: 20rpx;
			
			.quantity-btn {
				width: 50rpx;
				height: 50rpx;
				padding: 0;
				line-height: 48rpx;
				margin: 0;
				background-color: #f5f5f5;
				color: #333;
				
				&::after {
					border: none;
				}
			}
			
			.quantity-text {
				width: 60rpx;
				text-align: center;
				font-size: 28rpx;
			}
		}
		
		.delete-btn {
			padding: 10rpx;
		}
	}
}

.empty-cart {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-top: 20rpx;
	}
}

.checkout-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.total-price {
		font-size: 28rpx;
		color: #333;
		
		.price {
			font-size: 36rpx;
			color: #ff6b6b;
			font-weight: bold;
		}
	}
	
	.checkout-btn {
		width: 240rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #2ac2d1;
		border-radius: 35rpx;
		font-size: 28rpx;
		
		&::after {
			border: none;
		}
	}
}
</style> 